<template>
	<view class="page">

		<scroll-view class="qh_wrap" scroll-y="true" :scroll-into-view="scrollIntoId">
			<view class="plr15">
				<view class="ft13 bold  mb10"><text>{{$t('common').常用区号}}</text></view>
				<view class="flex-wrap">
					<view @click="getCode(item)" class="ft12 bold  bgF8 plr12 ptb12 radius22 mb10 mr10"
						v-for="(item,index) in hotList" :key="index">
						<text v-if="lang == 'zh'">{{ item.cn }}</text>
						<text v-if="lang == 'en'">{{ item.en }}</text>
						<text v-if="lang == 'hk'">{{ item.hk }}</text>
						<text>{{item.code}}</text>
					</view>
				</view>
			</view>
			<!-- 区号列表 -->
			<block v-if="searchValue == ''">
				<view class="code_li" v-for="(item, index) in list" :id="getId(index)" :key="index">
					<view class="letter-header bold">{{ getId(index) }}</view>
					<view>
						<view class="city-div" v-for="(city, i) in item" :key="i" @tap.stop="getCode(city)">
							<image src="https://shop.fukemans.com/wximg/xuanz.png" mode="" v-if="curIndex==city.code">
							</image>
							<text class="city" v-if="lang == 'zh'">{{ city.cn }}</text>
							<text class="city" v-if="lang == 'en'">{{ city.en }}</text>
							<text class="city" v-if="lang == 'hk'">{{ city.hk }}</text>
							<text class="txt">{{city.code}}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class='noCommodity' v-if="searchList.length==0">
					<view class='pictrue'>
						<image src="https://shop.fukemans.com/wximg/search_ndata.png" mode="widthFix"></image>
						<text>{{$t('share').没有找到}}"{{searchValue}}"{{$t('share').相关的数据}}</text>
					</view>
				</view>
			</block>
		</scroll-view>
		<!-- 右侧字母展示 -->
		<view class="letters" v-if="searchValue == ''">
			<view class="letters-item" v-for="item in letter" :key="item" @click="scrollTo(item)">{{ item }}</view>
		</view>
		<!-- 选中字母展示 -->
		<!-- 		<view class="mask" v-if="showMask">
			<view class="mask-r">{{selectLetter}}</view>
		</view> -->
	</view>
</template>

<script>
	import Citys from '../../common/codedata.js';
	export default {
		components: {},
		data() {
			return {
				lang: '',
				searchValue: '',
				hotList: [{
						"en": "China",
						"cn": "中国大陆",
						"hk": "中國大陸",
						"code": "+86",
						"first": "Z"
					},
					{
						"en": "Hong Kong",
						"cn": "中国香港",
						"hk": "中國香港",
						"code": "+852",
						"first": "X"
					},
					{
						"en": "Macau",
						"cn": "中国澳门",
						"hk": "中國澳門",
						"code": "+853",
						"first": "A"
					},
					{
						"en": "Taiwan",
						"cn": "中国台湾",
						"hk": "中國臺灣",
						"code": "+886",
						"first": "M"
					},
					// {
					// 	"en": "Philippines",
					// 	"cn": "菲律宾",
					// 	"hk": "菲律賓",
					// 	"code": "+63",
					// 	"first": "F"
					// },
				],
				wxConfig: {},
				Citys: Citys,
				showMask: false,
				letter: [],
				searchList: [],
				list: [],
				scrollIntoId: '',
				curIndex: ''
			};
		},
		// computed: mapGetters(['viewColor']),
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('common').选择国际电话区号
			});
			let area_code = uni.getStorageSync('AREACODE');
			if (area_code) {
				this.curIndex = area_code;
			}
			var mu = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y',
				'Z'
			];
			var tmp = [];
			this.citys = this.Citys;
			for (var i = 0; i < mu.length; i++) {
				var item = mu[i];
				for (var j = 0; j < this.citys.length; j++) {
					var py = this.citys[j].first;
					if (py == item) {
						if (tmp.indexOf(item) == -1) {
							this.list[i] = [this.citys[j]];
							tmp.push(item);
							this.letter.push(item);
						} else {
							this.list[i].push(this.citys[j]);
						}
					}
				}
			}
		},
		onShow() {
			if (!uni.getStorageSync('lang')) {
				uni.setStorageSync('lang', {
					"title": "简体中文",
					"lang": "zh"
				})
				this.$store.dispatch('changeLang')
				console.log(uni.getStorageSync('lang'));
			}
			this.lang = uni.getStorageSync('lang').lang
			console.log(this.lang);
		},
		onUnload() {
			uni.removeStorageSync('AREACODE');
		},
		methods: {
			getCode(item) {
				let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				if (pages.length > 1) {
					// uni.navigateBack()
					let prevPage = pages[pages.length - 2] //上一页页面实例
					uni.navigateBack({
						delta: 1,
						success: () => {
							prevPage.$vm.chooseCode(item) // 给上一页绑定方法otherFun,传参地址id
						}
					})
				} else {
					uni.reLaunch({
						url: '/pages/login/login'
					}, 3000)
				}
			},
			getId(index) {
				return this.letter[index];
			},
			scrollTo(letter) {
				this.showMask = true
				// this.selectLetter = letter == 'hot' ? this.$t('share').热 : letter
				setTimeout(() => {
					this.showMask = false
				}, 300);
				this.scrollIntoId = letter;
			},
			query(source, text) {
				let res = [];
				var self = this;
				res = source.filter(item => {
					const arr = [];
					let isHave = false;
					Object.keys(item).forEach(prop => {
						const itemStr = item[prop];
						self.isString(itemStr) &&
							itemStr.split(',').forEach(val => {
								arr.push(val);
							});
					});
					arr.some(val => {
						isHave = new RegExp('^' + text).test(val);
						return isHave;
					});
					return isHave;
				});
				return res;
			},
			isString(obj) {
				return typeof obj === 'string';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.qh_wrap {
		position: absolute;
		/* #ifdef APP-PLUS ||H5 */
		top: 20upx;
		/* #endif*/
		bottom: 0upx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.noCommodity {
		width: 100%;
		border-top: none;

		.pictrue {
			width: 464rpx;
			margin: 140rpx auto 0 auto;

			image {
				width: 100%;
			}
		}

		text {
			color: #BBBBBB;
			font-size: 24rpx;
		}
	}

	.code_pl {
		padding: 0 32rpx;

		.city-div {
			display: flex;
			align-items: center;
			color: #040404;
			padding: 24rpx 0;
			border-bottom: solid 2rpx #eee;

			image {
				width: 26rpx;
				height: 17rpx;
				margin-right: 12rpx;
			}

			.txt {
				margin-left: 12rpx;
			}
		}
	}

	.code_li {
		padding: 0 100rpx 0 50rpx;

		.letter-header {
			padding: 32rpx 0 24rpx 0;
			border-bottom: solid 2rpx #eee;
		}

		.city-div {
			display: flex;
			align-items: center;
			color: #040404;
			margin-top: 63rpx;

			&:first-child {
				margin-top: 28rpx;
			}

			image {
				width: 26rpx;
				height: 17rpx;
				margin-right: 12rpx;
			}

			.txt {
				margin-left: 12rpx;
			}
		}
	}

	.letters {
		position: absolute;
		right: 20rpx;
		// bottom: 0px;
		// width: 32rpx;
		// min-height:448rpx;
		/* #ifdef H5 */
		top: 39%;
		transform: translate(0, -30%);
		/* #endif */
		/* #ifndef H5 */
		top: 45%;
		transform: translate(0, -45%);
		/* #endif */

		color: #666;
		text-align: center;
		font-size: 24rpx;
		background: #EDEDED;
		border-radius: 32rpx;
		padding: 32rpx 6rpx;
		z-index: 4;

		.letters-item {
			/* #ifdef H5 */
			margin-bottom: 4upx;
			/* #endif */
			/* #ifndef H5 */
			margin-bottom: 2upx;

			/* #endif */
			&:last-child {
				margin-bottom: 0;
			}
		}
	}


	.mask {
		position: absolute;
		bottom: 0upx;
		top: 83upx;
		left: 0upx;
		right: 0upx;
		width: 750upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0);

		.mask-r {
			height: 120rpx;
			width: 120rpx;
			border-radius: 50%;
			line-height: 120rpx;
			background: rgba(0, 0, 0, 0.5);
			text-align: center;
			font-size: 50upx;
			color: #FFFFFF;
		}
	}

	.search_con {
		position: fixed;
		width: 100%;
		background: #fff;
		padding: 10rpx 22rpx;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		z-index: 99;

		.search_inner {
			background: #F8F8F8;
			border-radius: 56rpx;
			padding: 24rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			input {
				flex: 1;
				font-size: 28rpx;
			}

			.clear_img {
				width: 32rpx;
				height: 32rpx;
			}

			.search_img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
		}
	}

	page,
	body,
	.page {
		background: #fff;
		min-height: 100vh;
	}
</style>